import React, { Component } from 'react';
import autoBind from 'react-autobind';
import dataCenter from '../../utils/dataCenter';
import { Link, browserHistory } from 'dva/router';
import { Button, InputItem, Toast } from 'antd-mobile';
import { getCookie } from '../../utils/cookie';
import { getUserId, loginout } from '../../utils/utils'

import styles from './index.css';
import IconfontStyle from '../../assets/iconfont/iconfont.css';

class Mine extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        }
    }
    componentDidMount() {
    	const { dispatch, meyley } = this.props
    	dispatch({
    		type: 'address/fetchAddress',
    		payload: getUserId()
    	})
    	dispatch({
    		type: 'order/orderCount',
    		payload: {
    			userId: getUserId()
    		}
    	})
    }
    getDefaultAddress() {
    	const { address } = this.props

    	let defaultAddress = {}
    	address.addressList.map(address => {
    		if(address.isDefault == '1') {
    			defaultAddress = address
    		}
    	})
    	return defaultAddress
    }
	render() {
		const { order } = this.props
		
		let defaultAddress = this.getDefaultAddress()
	 	return (
	 		<div className={styles['mine-body']}>
	 			<div className={styles['mine-body-item']}>
	 				<div className={styles['mine-body-item-left']}>
	 					<img style={{width: '1rem', height: '1rem'}} className={styles['mine-body-item-left-img']} src={require('../../assets/mine/avatar.png')} />

	 					{
	 						getCookie('userName') ? (<span className={styles['mine-body-item-left-des']}>{getCookie('userName')}</span>) 
	 							: (<Link to="/login"><span style={{color: 'rgb(66,62,62)', fontSize: '0.3rem'}}>请登录</span></Link>)
	 					}
	 					
	 				</div>
	 				<div className={styles['mine-body-item-right']} style={{height: '1rem'}}>
	 				</div>
	 			</div>

	 			<div className={styles['mine-body-item']}>
	 				<div className={styles['mine-body-item-top']}>
	 					<div className={styles['mine-body-item-left']}>
		 				我的订单
		 				</div>
		 				<div className={styles['mine-body-item-right']} onClick={() => { browserHistory.push('/orders?tab=nopay') }}>
		 				查看全部订单
		 				<img style={{marginLeft: '0.12rem', width: '0.16rem'}} src={require('../../assets/icon/arrow-right.png')} />
		 				</div>
	 				</div>
	 				<div className={styles['mine-body-item-bottom']}>
	 					<div className={styles['mine-body-order']} onClick={() => { browserHistory.push('/orders?tab=nopay') }}>
	 						<span className={styles['mine-body-order-number']}>{order.orderCount && order.orderCount.unpayed || 0}</span>
	 						<span className={styles['mine-body-order-des']}>待付款</span>
	 					</div>
	 					<div className={styles['mine-body-order']} onClick={() => { browserHistory.push('/orders?tab=send') }}>
	 						<span className={styles['mine-body-order-number']}>{order.orderCount && order.orderCount.unshipped || 0}</span>
	 						<span className={styles['mine-body-order-des']}>待发货</span>
	 					</div>
	 					<div className={styles['mine-body-order']} onClick={() => { browserHistory.push('/orders?tab=receive') }}>
	 						<span className={styles['mine-body-order-number']}>{order.orderCount && order.orderCount.unreceived || 0}</span>
	 						<span className={styles['mine-body-order-des']}>待收货</span>
	 					</div>
	 				</div>
	 			</div>

	 			<div style={{paddingTop: '0.3rem', paddingBottom: '0.3rem'}} className={styles['mine-body-item']}>
	 				<div className={styles['mine-body-item-left']} style={{maxWidth: '80%'}}>
	 					<img className={styles['mine-body-item-left-img']} src={require('../../assets/mine/location.png')} />
	 					<span className={styles['mine-body-item-address']}>
	 						{
	 							defaultAddress.provinceName ? (
	 								<span>
	 									{defaultAddress.provinceName}
	 									{defaultAddress.cityName}
	 									{defaultAddress.districtName}
	 									{defaultAddress.address}
	 								</span>
	 								) : (<Link to="/addAddr"><span style={{color: 'rgb(66, 62, 62)'}}>暂无地址，点击添加</span></Link>)
	 						}
	 					</span>
	 				</div>
	 				<div style={{'position': 'relative', 'top': '0.12rem'}} className={styles['mine-body-item-right']} onClick={() => { browserHistory.push('/address?fromPage=homeTabType_mine') } }>
		 				修改 
		 				<img style={{marginLeft: '0.12rem', width: '0.16rem'}} src={require('../../assets/icon/arrow-right.png')} />
	 				</div>
	 			</div>

	 			<div style={{paddingTop: '0.3rem', paddingBottom: '0.3rem'}} className={styles['mine-body-item']} onClick={() => { browserHistory.push('/members') }}>
	 				<div className={styles['mine-body-item-left']}>
	 					<img className={styles['mine-body-item-left-img']} src={require('../../assets/mine/member.png')} />
	 					<span>我推荐的会员</span>
	 				</div>
	 				<div style={{'position': 'relative', 'top': '0.12rem'}} className={styles['mine-body-item-right']} >
	 					及服务佣金记录 
	 					<img style={{marginLeft: '0.12rem', width: '0.16rem'}} src={require('../../assets/icon/arrow-right.png')} />
	 				</div>
	 			</div>

	 			<div style={{paddingTop: '0.3rem', paddingBottom: '0.3rem'}} className={styles['mine-body-item']}>
	 				<Button className="meyley-button-red" onClick={loginout}><span style={{color: '#fff'}}>退出</span></Button>
	 			</div>
			</div>
	  	);
	}
};

Mine.propTypes = {
};

export default Mine
